<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>W3C Plus 教程</title>
    <style>
        body{
            background: wheat;
        }
        p{
            /*其实首段落缩进可以用pre-wrap*/
            white-space: pre-wrap;
        }
        .container{
            display: -webkit-flex;
            display: flex;
            -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-justify-content: space-around;
            justify-content: space-around;
            width: 100%;
            height: 100%;
            margin: 1rem 0;
            border: 0;
            border-radius: 0;
            background: wheat;
            perspective:100px;
            /*默认是
             center: left, right
             center: top, bottom
             */
            /*perspective-origin: left bottom;*/
        }
        .box{
            border: 1px solid white;
            border-radius: 10px;
            background: ghostwhite;
            height: 100px;
            width: 100px;
            margin:1em .2em;
        }
        *{
            -webkit-transition: 1s;
            transition: 1s;
        }
    </style>
    <style>
        /*specific css*/
        .demo1:hover{
            -webkit-transform: rotate(1turn);
        }
        .demo2:hover{
            -webkit-transform: rotate(-1turn);
        }

        .demo3:hover{
            transform: translateX(100px);
        }
        .demo4:hover{
            transform: translateX(-100px);
        }
        .demo5:hover{
            transform: translateY(100px);
        }
        .demo6:hover{
            transform: translateY(-100px);
        }
        .demo7:hover{
            transform: translateZ(100px);
        }
        .demo8:hover{
            transform: translateZ(-100px);
       }

        .demo9:hover{
            transform: scaleX(2);
        }
        .demo10:hover{
            transform: scaleY(2);
        }
        .demo11:hover{
            transform: scale(2);
        }
        .demo12:hover{
            transform: scale(.5);
        }
        .demo13:hover{
            transform: scale(-1);
        }
        .demo14:hover{
            transform: scale(0);
        }

        .demo15:hover{
            transform: skewX(90deg);
        }
        .demo16:hover{
            transform: skewY(90deg);
        }
        .demo17:hover{
            /*transform: rotate(45deg) skew(30deg,30deg);*/
            transform: skew(45deg,45deg);
        }

        .demo18:hover{
            transform: matrix(1,1,1,1,1,1);
        }
        .demo19:hover{
            transform: matrix(1,1,-1,0,0,0);
        }
        
        .display{
/*            display: block;*/
            opacity: 1;
        }
        .display:hover{
/*            display: none;*/
            opacity: 0;
        }
    </style>
</head>
<body>
<header>
    <h1>CSS3 transform</h1>
</header>
<article>
    <section>
        <div class="container">
            <div class="box demo1">rotate</div>
            <div class="box demo2">rotate</div>
        </div>
        <div class="container">
            <div class="box demo3">translate</div>
            <div class="box demo4">translate</div>
            <div class="box demo5">translate</div>
            <div class="box demo6">translate</div>
            <div class="box demo7">translate</div>
            <div class="box demo8">translate</div>
        </div>
        <div class="container">
            <div class="box demo9">scale</div>
            <div class="box demo10">scale</div>
            <div class="box demo11">scale</div>
            <div class="box demo12">scale</div>
            <div class="box demo13">scale</div>
            <div class="box demo14">scale</div>
        </div>
        <div class="container">
            <div class="box demo15">skew</div>
            <div class="box demo16">skew</div>
            <div class="box demo17">skew</div>
        </div>
        <div class="container">
            <div class="box demo18">matrix好吊的样子</div>
            <div class="box demo19">matrix好吊的样子</div>
        </div>
        <div class="container">
            <div class="box display">试试display</div>
        </div>
    </section>
    <p>
        换句话说就是我们同时对一个元素进行transform的多种属性操作，
        例如rotate、scale、translate三种，但这里需要提醒大家的，
        transform中使用多个属性时要用空格隔开。大家记住了是空格隔开

        translateZ的功能就是让元素在自己的眼前或近或远,
        最好在父元素设置 perspective, 如果有需要，还可以设置perspective-origin
        perspective 有点类似z-index，距离我们的眼睛的距离。注意demo7会被挡一下

        scale 按比例缩放。大于1放大，反之缩小,
        负数呢? 数值表示缩放比例，负号表示要先缩小,再放大
        0 表示缩小至看不见

        skew 会发生奇怪的事情
        transform: skew(90deg,90deg);
    </p>
</article>
</body>
</html>